<template>
<div class="chartsLeft-root">
  <div style="width: 38vw;" class="q-ml-md">
    <div class="text-h4 q-mb-md">数据统计</div>
    <q-card flat class="q-pa-sm" style="background: rgb(8,53,59);width: 38vw;">
      <div class=" text-body1  q-mb-sm text-weight-bold">全省数据总结</div>
      <div class="row justify-between no-wrap" style="width:100%;">
        <q-card flat style="background:rgb(28,78,71);" class="q-pa-sm col ">
          <div class="row justify-between">
            <div >
              <div class="text-Subtitle2">全省区域数量</div>
              <div @click="cssTest">点击</div>
              <transition
                appear
                enter-active-class="animated bounce"
                leave-active-class="animated fadeOut"
              >
                <div v-if="show" class="text-h4 text-green-13 text-center">{{distinction.total}}</div>
              </transition>

            </div>
            <div >
              <div class="text-body2">轻污染区域</div>
              <div class="text-h4 text-yellow-12 text-center">{{distinction.mile}}</div>
            </div>
            <div>
              <div>重污染区域</div>
              <div class="text-h4 text-red-4 text-center">{{distinction.serious}}</div>
            </div>
          </div>

        </q-card>
        <q-card flat style="background:rgb(28,78,71);" class="q-pa-sm col q-ml-sm">
          <div class="row justify-between">
            <div>
              <div class="text-body2">全省相关企业数量</div>
              <div class="text-h4 text-green-13 text-center">{{relatedCompany.total}}</div>
            </div>
            <div>
              <div class="text-body2">轻污染企业</div>
              <div class="text-h4 text-yellow-12 text-center">{{relatedCompany.mile}}</div>
            </div>
            <div>
              <div>重污染企业</div>
              <div class="text-h4 text-red-4 text-center">{{relatedCompany.serious}}</div>
            </div>
          </div>

        </q-card>
      </div>
    </q-card>

    <q-card flat class="row q-mt-md justify-between" style="background: rgba(0,0,0,0);width:38vw;height:27vh;">
      <q-card-section flat class="q-pa-sm" style="background: rgb(8,53,59);width: 55%;height: 100%;">
        <div class="text-subtitle1" style="height: 15%;">全省企业类型统计</div>
        <div class="column" style="height: 85%;">
          <div class="row items-baseline col"  v-for="item in companyType" :key="item.id">
            <div class="col-3">{{item.label}}</div>
            <div class="col-6">
              <q-linear-progress rounded size="1vh" :value="item.value/10" color="green-13" class="q-mt-sm"/>
            </div>
            <div class="q-ml-md">{{item.num}}家</div>
          </div>

        </div>
      </q-card-section>
      <q-card-section flat class="q-pa-sm" style="background: rgb(8,53,59);width: 43%;">
        <div class="text-subtitle1 no-wrap">全省企业类型统计图</div>
        <div id="pie" style="width: 15vw;height: 20vh;"></div>
      </q-card-section>
    </q-card>
    <q-card flat class="row q-mt-sm justify-between " style="background: rgba(0,0,0,0);height: 35vh;width: 38vw;">
      <q-card-section flat class="q-pa-sm " style="background: rgb(8,53,59);width: 19vw;height: 35vh;">
        <div class="text-subtitle1 no-wrap" style="height: 10%;">各区企业污染指数</div>

        <div id="barGraph" style="width: 18vw;height: 90%;">

        </div>
      </q-card-section>
      <q-card-section flat class="q-pa-sm " style="background: rgb(8,53,59);width: 18vw;height: 35vh;">
        <div style="height: 20%;">
          <div class="text-subtitle1">排污企业排行</div>
          <div class="row justify-between text-grey-5 q-mb-sm">
            <div>排名</div>
            <div>企业名</div>
          </div>
          <hr>
        </div>

        <div class="column justify-between q-pt-sm" style="height: 80%;">
          <div class="row justify-between text-body2 q-pa-sm col" v-for="(item,index) in companyRank" :key="item.id">
            <div>{{ index + 1 }}</div>
            <div>{{ item.label }}</div>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </div>
</div>
</template>
<script>
 // 左侧图标子组件
const companyType= [ // 公司类型
  {id: 6,label: '生物',value: 4,num: 50,},
  {id: 7,label: '化工',value: 3,num: 40,},
  {id: 8,label: '钢铁',value: 4,num: 30,},
  {id: 9,label: '食品',value: 8,num: 45,},
  {id: 10,label: '纺织',value: 6,num: 35,},
]
const companyRank = [
  {id: 1, label: '阿里巴巴责任有限公司'},
  {id: 2, label: '腾讯科技有限公司'},
  {id: 3, label: '浙江物产集团公司'},
  {id: 4, label: '杭州钢铁集团公司'},
  {id: 5, label: '浙江省能源集团有限公司'},
]
export default {
  name: 'ChartsLeft',
  props:{
    citys: {
      type: Array
    }

  },
  data () {
    return {
      companyType,
      companyRank,
      show: true,
      interval: null, // 计数器对象
      distinction: { // 地区数据
        total: 11, // 总数
        mile: 6,  // 轻
        serious: 2, // 严重
      },
      relatedCompany: { // 相关企业
        total: 1900, // 总
        mile: 500 ,// 轻
        serious: 200, // 重
      }
    }
  },
  methods: {
    initPie() { // 初始化饼图

      const myChart = this.$echart.init(document.getElementById('pie'));// 基于准备好的dom，初始化echarts实例

      // 指定图表的配置项和数据
      const option = {
        title: {
          // text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        legend: { // 图例
          orient: 'vertical',
          textStyle: {
            color: 'white'
          },
          x: 'right',
          data: ['大气污染', '水污染', '土壤污染', '固体废弃污染', '噪音污染'] // 图例选项
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '80%'], // 饼图的中心（圆心）坐标,第一项是相对于容器宽度，第二项是相对于容器高度。
            center: ['30%', '50%'], // 数组的第一项是内半径，第二项是外半径
            avoidLabelOverlap: false, // 是否在数据和为0的时候仍显示扇区。
            label: {
              show: true,
              position: 'inside',// 位置在里面,
              // rotate: true, // 是否径向排列
              formatter: function (params){ // 对百分比数字进行处理
                let newPercent = 0
                newPercent = Math.round(params.percent).toString()+'%'
                return newPercent
              }, // 模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比
              textStyle : {
                align : 'center',
                baseline : 'middle',
                color: 'rgb(0,0,0)',
                // fontSize : 15,
                fontWeight : 'bolder'
              },
              emphasis: { // 强调
                show: true
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            data: [
              {
                value: 335,
                name: '大气污染'
              },
              {
                value: 234,
                name: '水污染'
              },
              {
                value: 300,
                name: '土壤污染'
              },
              {
                value: 200,
                name: '固体废弃污染'
              },
              {
                value: 450,
                name: '噪音污染'
              }
            ],
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initBarGraphLeft() { // 初始化左侧条形统计图
      const myChart = this.$echart.init(document.getElementById('barGraph'));
      const option = {
        xAxis: {
          data: this.citys,
          // show: false,
          nameLocation: 'start',
          nameTextStyle: {
            borderWidth: 12,
          },
          axisTick: { // 刻度
            show: false, // 是否显示坐标轴刻度线
          },
          splitLine: { //网格分割线
            show: false
          },
          // maxInterval: 1,//最大类目间距
          // interval:0, // 间隔
          axisLabel: {
            interval: 0, // 间隔
            rotate: -45,// 设置旋转角度
            textStyle: {
              color: '#FFF'
            }
          },
          minorTick: {
            show: false,
          }
        },
        yAxis: { // y轴样式
          show: false,
          splitLine: {
            show: false
          },
          scale: true
        },
        series: [
          {
            type: 'bar',
            color: '#FF6347', // 柱子颜色
            label: {
              show: true,
              color: '#FFF', // 标志颜色
              position: 'top' // 在顶部显示
            },
            barWidth: 15,//设置柱子宽度，单位为px
            data: [5, 8, 11, 3, 9, 7, 4, 12, 6, 5, 5]
          }
        ]
      };
      myChart.setOption(option);
    },
    changeData() { // 动态改变数据
      console.log(111)
      this.interval=setInterval(()=>{ // 设置计数器
        if (this.relatedCompany.total===0){
          clearInterval(this.interval)
        }
        // console.log(222)
        this.distinction.total++;
        this.distinction.mile++;
        this.distinction.serious++;
        this.relatedCompany.total--;
        this.relatedCompany.mile++;
        this.relatedCompany.serious++;

      },1000)
    },
    cssTest () {
      this.show = !this.show
    }
  },
  mounted() {
    this.initPie();
    this.initBarGraphLeft();
    this.$nextTick(()=>{
      this.changeData();
    })

  },
  beforeDestroy() { //
    clearInterval(this.interval) // 清空计数器
  }
}
</script>
<style>

</style>
